<template>
  <div class="cloud-root"
       v-loading="cloudLoading"
       element-loading-text="自定义对象存储暂未开放"
       element-loading-spinner="iconfont icon-construction2-60"
  >
    <el-form :model="os" ref="cloud-form" class="bjs-form" style="width: 70%;">
      <el-form-item style="position: relative" >
        <el-select class="bjs-select" v-model="os.type" placeholder="供应商" :clearable="true">
          <template slot="prefix">
            <i class="iconfont icon-gys2"></i>
          </template>
          <el-option
              v-for="item in typeOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-input class="bjs-input endpoint" v-model="os.key" placeholder="地域">
          <template slot="prepend"><i class="iconfont icon-endpoint"></i></template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input class="bjs-input" v-model="os.key" placeholder="key">
          <template slot="prepend"><i class="iconfont icon-key"></i></template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input class="bjs-input" v-model="os.secret" placeholder="secret ">
          <template slot="prepend"><i class="iconfont icon-secret"></i></template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input class="bjs-input" v-model="os.defaultPath" placeholder="默认 bucket">
          <template slot="prepend"><i class="iconfont icon-bucket" style="font-size: 20px"></i></template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input class="bjs-input" v-model="os.defaultPath" placeholder="默认上传路径">
          <template slot="prepend"><i class="el-icon-upload" style="font-size: 20px"></i></template>
        </el-input>
      </el-form-item>

      <el-form-item style="text-align: center;">
        <el-button-group>
          <el-button size="mini" class="btn-success" @click="submit">保存</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: "cloud",
  data () {
    return {
      typeOpt : [
        { value: '5000', label: '阿里云 OSS',  disabled: false},
        { value: '5001', label: '腾讯云 COS',  disabled: true},
        { value: '5002', label: '七牛云 KODO', disabled: true}
      ],
      os: {
        type: '',
        key: '',
        secret : '',
        defaultPath: ''
      },
      cloudLoading: true
    }
  },
  methods: {
    submit () {

    }
  }
}
</script>

<style scoped lang="scss">
  .cloud-root {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bjs-select {
    width: 100%;
    margin-bottom: 4px;
    /deep/ .el-input__inner {
      border-radius: 0;
      height: 35px;
      padding-left: 76px;
    }
    /deep/ .el-input__inner:focus {
      border: 1px solid $theme-color-light;
    }
    /deep/ .el-input.is-focus .el-input__inner {
      border-color: $theme-color-light;
    }
    /deep/ .el-input__prefix {
      height: 81%;
      border-right: 1px solid #DCDFE6;
      background-color: #F5F7FA;
      color: #909399;
      padding: 0 20px;
      top: 4px;
      left: 1px;
      bottom: 2px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .el-select-dropdown__item.selected {
    color: $theme-color-light;
  }

  .endpoint /deep/ .el-input-group__prepend {
    padding: 4px 17px;
  }

  .select-prepend {
    position: absolute;
    padding: 5px 20px;
    border: 1px solid #DCDFE6;
    border-right: 0;
    background-color: #F5F7FA;
    color: #909399;
  }
</style>
